---
title: 介绍与使用
sidebar:
  order: 1
hero:
  title: Twoslash + ArkTS
  description: 让 ArkTS 语言的文档和示例代码和 `TypeScript` 语言的文档和示例代码一样，拥有丰富的语义信息。
  image:
    html: <img src="/images/twoslash-plus-arkts.svg" alt="Twoslash plus ArkTS" class="w-full md:max-w-sm" />
---

import { Tabs, TabItem, LinkCard, CardGrid } from '@astrojs/starlight/components';

`Twoslash` 是由 [Orta Therox](https://orta.io) 和 [Anthony Fu](https://antfu.me) 两位大佬推出的一套为 `文档` 和 `TypeScript 示例代码` 增强语义信息的工具，能够在为基于 `Markdown` 的文档框架（如 [VitePress](https://vitepress.dev) 和 [Astro Starlight](https://starlight.astro.build) 等）在网页文档中即时渲染和 `vscode` 几乎一模一样的 `代码提示`、`补全`、`错误提示` 等语义信息。现在，我们把它带到了 `ArkTS` 语言中，让 `ArkTS` 语言的文档和示例代码也拥有同样的体验！

<CardGrid>
  <LinkCard title="Twoslash 仓库" description="点击前往 Twoslash for ArkTS 核心仓库。" href="https://github.com/ohosvscode/twoslash" target="_blank" />
  <LinkCard title="Twoslash for expressive code" description="点击前往 Twoslash for expressive code 适配器仓库。" href="https://github.com/ohosvscode/twoslash-expressive-code" target="_blank" />
</CardGrid>

下面是一个简单的 `ArkTS Twoslash` 示例，我们这个文档是基于 `Astro Starlight` 框架构建的，因此允许开箱即用。您可以将鼠标移到代码上（如果您使用的移动端设备，可以点击一下代码段），如下面的 `struct Index` 的 `Index`, 以及 `@Component` 的 `Component` 等，都会出现对应的语义信息：

<Tabs>
  <TabItem label="Twoslash 渲染后">
    ```ets twoslash
    @Entry
    @Component
    struct Index {
      build(): void {
        Column() {
          Text('Hello, World!')
        }.width('100%')
        .height('100%')
      }
    }
    ```
  </TabItem>
  <TabItem label="Markdown 源代码">
  ```ets
  @Entry
  @Component
  struct Index {
    build(): void {
      Column() {
        Text('Hello, World!')
      }.width('100%')
      .height('100%')
    }
  }
  ```
  </TabItem>
</Tabs>

同时，原版的 `TypeScript Twoslash` 也完全没有任何冲突：

```ts twoslash
function add(a: number, b: number): number {
  return a + b;
}

add(1, 2);
```

`TSX` 语法也完全没有任何影响：

```tsx twoslash
const a = <div>Hello, World!</div>;
```

同时，`ohos-typescript@4.9.5-r10` 中 `@interface` 装饰器已经支持了，目前我们也默认开启了该功能：

```ets twoslash
@interface MyInterface {
  value: string
}

@MyInterface({ value: 'Hello, world!' })
class MyClass {}
```

:::note
虽然但是，不知道为啥它的提示信息有些奇怪 (用 `class declaration` 改的，目前在 `deveco studio next` 中也是这样)，但是不影响使用和正常编译
:::

## 使用和演示

<LinkCard title="Twoslash 查询" description="查询 Twoslash 的用法和示例。" href="/twoslash/twoslash-query" />

TODO: 安装方法待补充
